<%@ include file="/WEB-INF/views/includes/include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Global Domination</title>
<link type="text/css"
	href="css/ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<!-- link type="text/css"
        href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css"
        rel="stylesheet" /-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
        </script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js">
        </script>
<!--
        jCarousel library
        -->
<script type="text/javascript" src="js/jquery.jcarousel.pack.js">
        </script>
<script type="text/javascript"
	src="http://www.google.com/jsapi?key=ABQIAAAAVQWZ0_S12ptHUFmsCCVo0hQaBG_rsaotee9vZO1XxwnEWe6anhSr-K2qEkbLbFhoecY_ImPF2-ZotA">
        </script>
<script type="text/javascript" src="js/appmap.js">
        </script>
<script type="text/javascript" src="js/appres.js">
        </script>
<!--
        jCarousel core stylesheet
        -->
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<!--
        jCarousel skin stylesheet
        -->
<link rel="stylesheet" type="text/css" href="css/jcarousel.skin.css" />
<link rel="stylesheet" type="text/css" href="css/tangoskin.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<table width="100%">
<tr> 
<td width="15%"> G L O B A L   D O M I N A T I O N</td>
<td id="resperc0" class="ui-widget-header"> </td> 
 <td id="resperc1" class="ui-widget-header"> </td> 
 <td id="resperc2" class="ui-widget-header"> </td> 
 <td id="resperc3" class="ui-widget-header"> </td>
 <td id="resperc4" class="ui-widget-header"> </td>
 <td id="resperc5" class="ui-widget-header"> </td> 
 <td> <span class="freeStat" id="resTotal">X </span></td>
 <td><span class="buttonStat">Stat
 </span> </td>
 </tr>
</table>
<div id="tabs">
<ul>
	<li><a href="#tabsCivilian">Civilian</a></li>
	<li><a href="#tabsMil">Military</a></li>
	<li><a href="#tabsTerritory">Territory</a></li>
	<li><a href="#tabsWar">War</a></li>
</ul>
<div id="tabsCivilian" class="minh">
<div id="accordion">
<div>
<h3><a href="#">Food</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/foodiconi.png"> 
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td><span
	class="resStat" id="resfood">0 Persons collecting food </span></td>
			</tr>
			<tr>
				<td align="right"> <span
	class="buttonRes" id="addfood">Add </span> <span class="buttonResRem"
	id="remfood">Remove </span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


	
	</div>
</div>
<div>
<h3><a href="#">Water</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/watericon.png" width="128px" height="128px">
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td> <span
	class="resStat" id="reswater">0 Persons collecting water </span> </td>
			</tr>
			<tr>
				<td align="right"><span
	class="buttonRes" id="addwater">Add </span> <span class="buttonResRem"
	id="remwater">Remove </span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


	

	
	</div>
</div>
<div>
<h3><a href="#">Oil</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/oilicon.png">
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td> <span class="resStat"
	id="reshay">0 Persons collecting oil </span> </td>
			</tr>
			<tr>
				<td align="right"><span class="buttonRes"
	id="addhay">Add </span> <span class="buttonResRem" id="remhay">Remove
</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

 </div>
</div>
<div>
<h3><a href="#">Wood</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/woodicon.png">
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td> <span class="resStat"
	id="reswood">0 Persons collecting wood </span></td>
			</tr>
			<tr>
				<td align="right"><span class="buttonRes"
	id="addwood">Add </span> <span class="buttonResRem" id="remwood">Remove
</span>
</td>
			</tr>
		</table>
		</td>
	</tr>
</table>


 

</div>
</div>
<div>
<h3><a href="#">Silver</a></h3>
<div>
<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/silvericon.png"> 
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td><span class="resStat"
	id="ressilver">0 Persons collecting silver </span></td>
			</tr>
			<tr>
				<td align="right"> <span
	class="buttonRes" id="addsilver">Add </span> <span class="buttonResRem"
	id="remsilver">Remove </span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>
	

</div>
<div>
<h3><a href="#">Gold</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%">
		<img src="images/civresources/goldicon.png">
		</td>
		
		<td>
		<table class="fullheight">
			<tr>
				<td><span class="resStat"
	id="resgold">0 Persons collecting gold </span> </td>
			</tr>
			<tr>
				<td align="right"><span class="buttonRes"
	id="addgold">Add </span> <span class="buttonResRem" id="remgold">Remove
</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


 </div>
</div>
</div>
		
	
</div>
</div>
<div id="tabsMil" class="minh">
<div id="milaccordion">
<div>
<h3><a href="#">Army</a></h3>
<div>



<table  class="fullheight">
	<tr>
		<td style="width: 25%"><img src="images/military/army.png" /></td>
		<td style="width: 75%;" valign="top">

		<table class="fullheight">

			<tr>
				<td><span class="resStat" id="resArmy">0 Army </span></td>
			</tr>
						<tr>
				<td>
				<table style="width: 100%;">
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost00" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost01" class="milcost"></span></td>
						<td valign="top"><span id="milcost02" class="milcost"></span></td>
						<td valign="top"><span id="milcost03" class="milcost"></span></td>
						<td valign="top"><span id="milcost04" class="milcost"></span></td>
						<td valign="top"><span id="milcost05" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createArmy">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


</div>
</div>
<div>
<h3><a href="#">Tank</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%"><img src="images/military/tankicon.png" /></td>
		<td style="width: 75%;" valign="top">

		<table class="fullheight">
			
			<tr>
				<td><span class="resStat" id="resTank">0 Tanks </span></td>
			</tr>
			<tr>
				<td>
				<table style="width: 100%;">
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost10" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost11" class="milcost"></span></td>
						<td valign="top"><span id="milcost12" class="milcost"></span></td>
						<td valign="top"><span id="milcost13" class="milcost"></span></td>
						<td valign="top"><span id="milcost14" class="milcost"></span></td>
						<td valign="top"><span id="milcost15" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createTank">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</div>
</div>
<div>
<h3><a href="#">Aircraft</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%"><img src="images/military/airicon2.png" /></td>
		<td style="width: 75%;" valign="top">

		<table class="fullheight">
		
			<tr>
				<td><span class="resStat" id="resAir">0 Aircraft </span></td>
			</tr>
				<tr>
				<td>
				<table style="width: 100%;">
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost20" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost21" class="milcost"></span></td>
						<td valign="top"><span id="milcost22" class="milcost"></span></td>
						<td valign="top"><span id="milcost23" class="milcost"></span></td>
						<td valign="top"><span id="milcost24" class="milcost"></span></td>
						<td valign="top"><span id="milcost25" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createAir">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


</div>
</div>
<div>
<h3><a href="#">Navy</a></h3>
<div>
<table class="fullheight">
	<tr>
		<td style="width: 25%"><img src="images/military/navyicon.png" /></td>
		<td style="width: 75%;" valign="top">

		<table class="fullheight">
			
			<tr>
				<td><span class="resStat" id="resNavy">0 Navy </span></td>
			</tr>
			<tr>
				<td>
				<table style="width: 100%;">
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost30" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost31" class="milcost"></span></td>
						<td valign="top"><span id="milcost32" class="milcost"></span></td>
						<td valign="top"><span id="milcost33" class="milcost"></span></td>
						<td valign="top"><span id="milcost34" class="milcost"></span></td>
						<td valign="top"><span id="milcost35" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createNavy">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>


</div>
</div>
<div>
<h3><a href="#">Spies</a></h3>
<div>

<table class="fullheight">
	<tr>
		<td style="width: 25%"><img src="images/military/spy.png" /></td>
		<td style="width: 75%;" valign="top">

		<table class="fullheight">
		
			<tr>
				<td><span class="resStat" id="resSpies">0 Spies </span></td>
			</tr>
				<tr>
				<td>
				<table style="width: 100%;">
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost40" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost41" class="milcost"></span></td>
						<td valign="top"><span id="milcost42" class="milcost"></span></td>
						<td valign="top"><span id="milcost43" class="milcost"></span></td>
						<td valign="top"><span id="milcost44" class="milcost"></span></td>
						<td valign="top"><span id="milcost45" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createSpy">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>

</div>
</div>
<div>
<h3><a href="#">Submarines</a></h3>
<div>


<table class="fullheight" >
	<tr>
		<td style="width: 25%" ><img src="images/military/subicon.png" /></td>
		<td style="width: 75%;" valign="top" >

		<table class="fullheight" >
		
			<tr>
				<td><span class="resStat" id="resSubs">0 Submarine </span></td>
			</tr>
				<tr >
				<td>
				<table style="width: 100%;" >
					<tr>
						<td valign="top">Cost</td>
						<td valign="top"><span id="milcost50" class="milcost"><img
							src="images/loading/loading1.gif" /></span></td>
						<td valign="top"><span id="milcost51" class="milcost"></span></td>
						<td valign="top"><span id="milcost52" class="milcost"></span></td>
						<td valign="top"><span id="milcost53" class="milcost"></span></td>
						<td valign="top"><span id="milcost54" class="milcost"></span></td>
						<td valign="top"><span id="milcost55" class="milcost"></span></td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>
				<td align="right"><span class="buttonMil" id="createSubs">Create
				</span></td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</div>
</div>
</div>
<table width="100%" border="0">
	<tr>
		<td width="100%">
		<div width="100%" height="100%" style="border: 2;" id="xmilstats">
		 </div>
		</td>
	</tr>
</table>
</div>
<div id="tabsTerritory" class="minh"><img src="images/loading.gif"
	alt="Loading.Please wait.." />
	
	</div>

<div id="tabsWar" class="minh">


<table border=0 width="100%">
	<tr>
		<td width="75%">

		<div align="right" class="allymap" id="warmap_canvas"><!-- map of war -->
		</div>
		</td>
		<td width="25%">
		<div id="ally_info" class="minh">
		<div id="enemypanel"></div>
		</div>
		</td>
	</tr>
</table>

</div>
</div>

<script language="javascript">
                                                                                                                                                                    
									var MAX_MIL_RES=6;  
									var MAX_CIV_RES=6;            					
                                    var homeLat = ${homeLat};
                                    var homeLon = ${homeLon};
                                    var en="${enemyCountry}";
                                    var hc="${homeCountry}";
                                    var map=null;
                                    var allyMap=null;
                                    var warMap=null;
                                    var timerID;            
                                    var resources = new Array(10);
                                    var mresources = new Array(10);
                                    var totalRes = 100;
                                    var milcost = new Array(5);
                                    var costhumb = new Array(5);
                                    var isResDirty = new Array(5);
                                    
                                    function initMain(){
                                    timerID=setInterval(syncServer,1000000 );
                                    for (i = 0; i < 10; i++) {
                                    resources[i] = new Array(3);	
                                    }
                                   
                                    costhumb[0]="<img src='images/civresources/foodthumb.png'>";
                                    costhumb[1]="<img src='images/civresources/waterthumb.png'>";
                                    costhumb[2]="<img src='images/civresources/oilthumb.png'>";
                                    costhumb[3]="<img src='images/civresources/woodthumb.png'>";
                                    costhumb[4]="<img src='images/civresources/silverthumb.png'>";
                                    costhumb[5]="<img src='images/civresources/goldthumb.png'>";
                                       
                                    ;
                                    for (i = 0; i < MAX_MIL_RES; i++) {
                                    milcost[i] = new Array(MAX_MIL_RES);	
                                    milcost[i][0]=900 * (i+1);
                                    milcost[i][1]=800 * (i+1);
                                    milcost[i][2]=700 * (i+1);
                                    milcost[i][3]=600 * (i+1);
                                    milcost[i][4]=500 * (i+1);
                                    milcost[i][5]=400 * (i+1);

                                    for (icost = 0; icost < MAX_MIL_RES; icost++) {
                                    		$('#milcost' + i +""+ icost).html(costhumb[icost] +""+milcost[i][icost]);
                                        }
                                    
                                    }
                                    
                                    <c:forEach items="${person.resource}" var="resource">
                                    resources[<c:out value="${resource.resType}"/>][0]=<c:out value="${resource.civDeployed}"/>;
                                    resources[<c:out value="${resource.resType}"/>][1]=<c:out value="${resource.resAvailable}"/>;
                                    resources[<c:out value="${resource.resType}"/>][2]=<c:out value="${resource.civDeployed}"/>;
                                    </c:forEach>
                                    ;
                                    <c:forEach items="${person.milresource}" var="mresource">
                                    mresources[<c:out value="${mresource.unitType}"/>]=<c:out value="${mresource.milAvailable}"/>;
                                    </c:forEach>            
                                    
                                    totalRes = totalRes - (resources[0][0] + resources[1][0] + resources[2][0] + resources[3][0] + resources[4][0] + resources[5][0]);
                                    syncResControls();
                                    syncMilControls();
                                   syncResData();
                                   google.load("maps", "2.x");
                                    }
                                                
                                  
                                    function syncServer(resType){
                                    $.getJSON("resource/getallcivresources.html"                           
                                       , function(availability){
                                    if (null == availability) {
                                    jalert("Unable to contact server! Are you online?",2)
                                    return;
                                    }
                                    resources[0][1]=parseInt(availability.res0);
                                    resources[1][1]=parseInt(availability.res1);
                                    resources[2][1]=parseInt(availability.res2);
                                    resources[3][1]=parseInt(availability.res3);
                                    resources[4][1]=parseInt(availability.res4);
                                    resources[5][1]=parseInt(availability.res5);
                                    syncResData();
                                    });
                                    }
                                                                  

  
                                   initMain();

        </script>

<script type="text/javascript" src="js/appjq.js">
        </script>
<div id="alertmsg"></div>

<div id="jalert" title="Information">Alert Message!</div>
</body>
</html>
